<template>
  <div
    id="bubble"
    style="width: 100%; height: 500px; margin-top: 0px; border: 1px dashed #000"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      data1: [
        [
          [609, 61378.67, 37710.06, "安徽省", "0-50000元"],
          [489, 37075.53, 23563.27, "福建省", "0-50000元"],
          [167, 14294.76, 9095.96, "甘肃省", "0-50000元"],
          [436, 35140.1, 23986.69, "广西壮族自治区", "0-50000元"],
          [345, 32274.16, 21879.56, "贵州省", "0-50000元"],
          [178, 16828.18, 11462.58, "海南省", "0-50000元"],
          [379, 35058.29, 21292.19, "黑龙江省", "0-50000元"],
          [75, 8581.7, 1827.8, "湖北省", "0-50000元"],
          [401, 42040.92, 26723.66, "吉林省", "0-50000元"],
          [411, 36791.65, 23145.05, "江西省", "0-50000元"],
          [215, 36827, 28863.3, "内蒙古自治区", "0-50000元"],
          [42, 4804.92, 3716.42, "宁夏回族自治区", "0-50000元"],
          [19, 2396.2, 1724.2, "青海省", "0-50000元"],
          [465, 46568.8, 32515.4, "山西省", "0-50000元"],
          [465, 46568.8, 32515.4, "山西省", "0-50000元"],
          [3, 489.72, 0, "西藏自治区", "0-50000元"],
          [58, 10112.9, 2768, "新疆维吾尔自治区", "0-50000元"],
        ],
        [
          [1083, 106561.56, 64374.92, "河北省", "50001-100000元"],
          [966, 90619.72, 56354.03, "河南省", "50001-100000元"],
          [1099, 102929.22, 70268.68, "湖南省", "50001-100000元"],
          [1187, 107355.93, 74692.05, "辽宁省", "50001-100000元"],
          [1153, 124564.24, 89990.06, "天津", "50001-100000元"],
          [778, 75769.32, 53633.84, "云南省", "50001-100000"],
          [1063, 108975.65, 71514.65, "重庆", "50001-100000元"],
        ],
        [
          [1804, 175046.13, 103917.26, "山东省", "100001-150000元"],
          [2019, 188948.12, 127648.15, "四川省", "100001-150000元"],
          [2061, 203126.96, 141664.8, "浙江省", "100001-150000元"],
          [2463, 227855.28, 147822.9, "广东省", "100001-150000元"],
        ],
        [
          [2054, 231055.49, 166448.48, "北京", "150001-200000元"],
          [2126, 227930.93, 159359.18, "江苏省", "150001-200000元"],
        ],
        [[3353, 544907.63, 264039.78, "上海", "250000-300000元"]],
      ],
    };
  },
  mounted() {
    var chartDom = document.getElementById("bubble");
    var myChart = echarts.init(chartDom);
    var option = {
      //标题
      title: {
        top: "90%",
        text: "天猫订单分析气泡图",
        textStyle: {
          //主标题内容样式
          color: "rgba(220, 6, 6, 1)",
          fontstyle: "italic",
        },
        padding: [0, 0, 100, 100], // 标题位置
      },
      //图例
      legend: {
        type: "scroll",
        top: "0%",
        left: "5%", //图例相对容器位置
        selected: {
          //图例选择，图形加载出来会显示选择的图例，默认为true
          收货地址: true,
        },
        textStyle: {
          //图例样式内容
          color: "#333",
        },
        tooltip: {
          //图例提示框，默认不显示
          show: true,
          color: "red",
        },
        data: [
          "0-50000元",
          "50001-100000元",
          "100001-150000元",
          "150001-200000元",
          "200001-300000元",
        ],
      },
      tooltip: {
        show: true,
        trigger: "item",
        axisPointer: {
          type: "shadow",
          axis: "auto",
        },
        padding: 5,
        textStyle: {
          color: "rgba(24, 222, 203, 1)",
        },
        formatter: function (params) {
          console.log(params);
          return "订单数"+params.data[0]+"\n"+"订单总金额"+params.data[1]+"\n"+"订单实际支付总金额"+params.data[2];
        },
        extraCssText:'width:200px; white-space:pre-wrap'
      },
      grid: {
        left: "15%",
        top: "10%",
      },
      xAxis: {
        name: "订单数量",
        nameLocation: "end",
        nameTextStyle: {
          color: "rgba(224, 6, 244, 1)",
        },
        splitine: {
          linestyle: {
            type: "dashed",
          },
        },
      },
      yAxis: {
        name: "订单总金额",
        nameLocation: "end",
        nameTextStyle: {
          color: "rgba(224, 6, 244, 1)",
        },
        splitine: {
          linestyle: {
            type: "dashed",
          },
        },
        scale: true,
      },
      series: [
        {
          name: "0-50000元",
          data: this.data1[0],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(120, 36, 50, 0.5)",
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: "rgb(251, 118, 123)",
              },
              {
                offset: 1,
                color: "rgb(204, 46, 72)",
              },
            ]),
          },
        },
        {
          name: "50001-100000元",
          data: this.data1[1],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: "rgba(237, 125, 49, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(237, 125, 49)",
                },
                {
                  offset: 1,
                  color: "rgb(237, 125, 49)",
                },
              ]),
            },
          },
        },
        {
          name: "100001-150000元",
          data: this.data1[2],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: "rgba(255, 192, 0, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 192, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 192, 0)",
                },
              ]),
            },
          },
        },
        {
          name: "150001-200000元",
          data: this.data1[3],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: "rgba(25, 100, 150, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(129, 227, 238)",
                },
                {
                  offset: 1,
                  color: "rgb(25, 183, 207)",
                },
              ]),
            },
          },
        },
        {
          name: "200001-300000元",
          data: this.data1[4],
          type: "scatter",
          symbolSize: function (data) {
            return Math.sqrt(data[2]) / 5;
          },
          emphasis: {
            focus: "series",
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: "rgba(112, 173, 71, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(112, 173, 71)",
                },
                {
                  offset: 1,
                  color: "rgb(112, 173, 71)",
                },
              ]),
            },
          },
        },
      ],
    };

    myChart.setOption(option);
  },
};
</script>
